import React, { Component } from "react";
import { connect } from "react-redux";
import { getList, initsetList, lists } from "../../../redux/action/yin";
import { Input, Pagination } from "antd";
import "./project.scss";
import Item from "../../../components/item";

const { Search } = Input;
class Project extends Component {
    state = {
        intList: [
            {
                text: "生产实训",
                proType: 1,
            },
            {
                text: "教学实训",
                proType: 2,
            },
            {
                text: "专业群实训",
                proType: 3,
            },
        ],
        tablist: [
            {
                text: "综合",
                orderByColumn: "project.stucount"
            },
            {
                text: "最新",
                orderByColumn: "project.publishtime"
            },
            {
                text: "最热",
                orderByColumn: "project.stucount"
            }
        ],
        isAsc: "desc",
        orderByColumn: "project.stucount",
        pageNum: 1,
        pageSize: 10,
        proType: "",
        specialtyTag: "",
        industryTag: "",
        proName: "",
        useindex: 0,
    };
    async componentDidMount() {
        await this.props.gitinit();
        await this.props.initSetLists();
        await this.initFun();
    }

    initFun = async () => {
        const {
            pageNum,
            pageSize,
            proType,
            specialtyTag,
            industryTag,
            orderByColumn,
            isAsc,
            proName
        } = this.state;
        const params = {
            pageNum,
            pageSize,
            proType,
            specialtyTag,
            industryTag,
            orderByColumn,
            isAsc,
            proName
        };
        await this.props.Listd(params);
    };

    onChange = async (page, pageSize) => {
        this.setState(
            {
                pageNum: page,
                pageSize,
            },
            () => {
                const { pageNum, pageSize } = this.state;
                this.props.Listd({ pageNum, pageSize });
            }
        );
    };

    setPro = (type) => {
        this.setState({
            proType: type,
        }, () => {
            this.initFun();
        });
    };

    setSpec = (type) => {
        this.setState({
            specialtyTag: type
        }, () => {
            this.initFun();
        })
    }

    setIndustryTag = (type) => {
        this.setState({
            industryTag: type
        }, () => {
            this.initFun();
        })
    }

    setTab = (type) => {
        this.setState({
            orderByColumn: type
        }, () => {
            this.initFun();
        })
    }

    onSearch = (value) => {
        this.setState({
            proName: value
        }, () => {
            this.initFun();
        })
    };

    render() {
        let getLists = this.props.Yin.initList;
        let hangList = this.props.Yin.initSetList;
        let { intList, tablist, useindex, proType, specialtyTag, industryTag, pageNum } = this.state;
        let { List } = this.props.Yin;

        return (
            <div id="project">
                <div className="nav">
                    <div className="classF">
                        <div className="bs">实训类型：</div>
                        <div className="bbs">
                            <span className={proType === "" ? "active" : ""} onClick={() => this.setPro("")}>全部</span>
                            {
                                intList &&
                                intList.map((item, ind) => {
                                    return (
                                        <span className={proType === item.proType ? "active" : ""} onClick={() => this.setPro(item.proType)} key={ind}>
                                            {item.text}
                                        </span>
                                    );
                                })
                            }
                        </div>
                    </div>
                    <div className="hangye">
                        <div className="bs">行业：</div>
                        <div className="bss">
                            <span className={specialtyTag === "" ? "active" : ""} onClick={() => this.setSpec("")}>全部</span>
                            {hangList && hangList.map((item, ind) => {
                                return <span className={specialtyTag === item.value ? "active" : ""} onClick={() => this.setSpec(item.value)} key={ind}>{item.label}</span>;
                            })}

                        </div>
                    </div>
                    <div className="zhuanye">
                        <div className="bs">专业：</div>
                        <div className="bss">
                            <span className={industryTag === "" ? "active" : ""} onClick={() => this.setIndustryTag("")}>全部</span>
                            {getLists &&
                                getLists.map((item, ind) => {
                                    return <span className={industryTag === item.value ? "active" : ""} onClick={() => this.setIndustryTag(item.value)} key={ind}>{item.label}</span>;
                                })}
                        </div>
                    </div>
                </div>
                <div className="pos">
                    <div className="anvs">
                        <div className="tab">
                            {tablist &&
                                tablist.map((item, ind) => {
                                    return (
                                        <span
                                            id="apn"
                                            onClick={() => {
                                                this.setState({ useindex: ind });
                                                this.setTab(item.orderByColumn);
                                            }}
                                            className={ind === useindex ? "action" : ""}
                                            key={ind}
                                        >
                                            {item.text}
                                        </span>
                                    );
                                })}
                        </div>
                        <Search
                            className="add"
                            placeholder="搜索项目"
                            onSearch={this.onSearch}
                            style={{ width: 200 }}
                        />
                    </div>
                    <div className="itemas">
                        {List &&
                            List.map((item, ind) => {
                                return <Item item={item} key={ind} />;
                            })}
                    </div>
                    <div className="fenye">
                        <Pagination
                            onChange={this.onChange}
                            pageSizeOptions={["10", "20", "50", "100"]}
                            defaultCurrent={1}
                            current={pageNum}
                            total={this.props.Yin.total}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return {
            ...state,
        };
    },
    (dispatch) => {
        return {
            gitinit() {
                dispatch(getList());
            },
            initSetLists() {
                dispatch(initsetList());
            },
            Listd(params) {
                dispatch(lists(params));
            },
        };
    }
)(Project);


